/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment} from 'react';
import {
  StyleSheet,
  View,
  Text,TouchableHighlight,
  AsyncStorage,
  Dimensions,
  TextInput,
  Image
} from 'react-native';
import SplashScreen from 'react-native-splash-screen';

class Login extends React.Component{
  constructor(){
    super()
    this.state={
      username:'',
      password:'',
      token:'',
    }

  }
  username = (data) =>{
       this.setState({
         username:data
       })
  }
  password = (data) =>{
    this.setState({
      password:data
    })
  }
  componentDidMount(){
    SplashScreen.hide();
  }

  
 
  Login =()=>{
    let formData = new FormData();
    formData.append("username", this.state.username);
    formData.append("password",  this.state.password);
    fetch('http://0bd4d485.ngrok.io/authentication/form', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
       // 'Content-Type': 'multipart/form-data;charset=UTF-8'
        'Content-Type':application/x-www-form-urlencoded 
        //'Content-Type': 'application/json',
      },
      body: formData
        }).then((response)=>response.json()).then((responseData) =>{
          
          AsyncStorage.setItem('token',responseData.token,(error)=>{
            if(error){
              console.log(error)
            }else{
              this.props.navigation.navigate('App',{
                userdata:responseData.state.principal
              })
            }
          })
        });
       
  }
  render(){
   
  // 全局变量
    return(
     
       <View style={styles.ViewStyle}>
             <View style={styles.TopViewStyle}>
                <View style={styles.TopViewStyleImage}>
                   <Image source={require('../login/11.png')} style={{width:'100%',height:'100%'}}></Image>
                   <Text style={{color:'#52966d',fontSize:21}}>三 果 云 商</Text>
                </View>
             </View>
             <View style={styles.LoginViewStyle}>
               <View style={{width:'80%',height:'100%',backgroundColor:'rgba(115,189,176,0.7)',alignItems:'center'}}>
                  <TextInput placeholder='请 输 入 账 号' onChangeText={this.username} style={{width:'80%',height:50,backgroundColor:'#ebf7e9',borderRadius:10,marginTop:20}}></TextInput>
                  <TextInput placeholder='请 输 入 密 码' onChangeText={this.password} style={{width:'80%',height:50,backgroundColor:'#ebf7e9',borderRadius:10,marginTop:20}}></TextInput>
                  <Text style={{color:'#eaf8e9',textAlign:'right',marginLeft:200,marginTop:10}}>忘记密码?</Text>
                  <TouchableHighlight onPress={()=>this.Login()} underlayColor='#289580' style={{width:'50%',height:50,backgroundColor:'#289580',borderRadius:5,alignItems:'center',justifyContent:'center',marginTop:10}}>
                    <Text style={{fontSize:21,color:'#ebf7e9'}}>登 录</Text>
                  </TouchableHighlight>
               </View>
             </View>
             <View style={styles.ButtonViewStyle}>
               <View style={{flexDirection:'row'}}>
                  <Text style={{color:'#ebf7e9'}}>没有账号?</Text>
                  <Text style={{color:'#38ab9c'}}>立即注册</Text>
                </View>
             </View>
       </View>
    )
  }
}

const styles = StyleSheet.create({
  ViewStyle:{
    width:Dimensions.get('window').width,
    height:Dimensions.get('window').height,
    backgroundColor:'#a5d7ce'
  },
  TopViewStyle:{
    width:Dimensions.get('window').width,
    height:((Dimensions.get('window').height)/10)*3,
    alignItems:'center',
    justifyContent:'center'
  },
  TopViewStyleImage:{
    width:100,
    height:100,
    borderRadius:70,
    backgroundColor:'#ffffff'
  },
  LoginViewStyle:{
    width:Dimensions.get('window').width,
    height:((Dimensions.get('window').height)/10)*4,
    alignItems:'center'
  },
  ButtonViewStyle:{
    width:Dimensions.get('window').width,
    height:((Dimensions.get('window').height)/10)*3,
    alignItems:'center',
    justifyContent:'center'
  }
});

export default Login;
